<template>
  <el-dialog class="base-dialog" :fullscreen="props.fullscreen" append-to-body :close-on-click-modal="false"
             :show-close="false">
    <template #header>
      <div class="header  flex items-center text-lg p-5" v-if="props.isShowTitle">
        <BaseIcon v-if="props.icon" class="mr-1.5" :icon="props.icon" :size="20"></BaseIcon>
        <span>{{ props.title }}</span>
      </div>
    </template>
    <el-scrollbar v-if="props.fullscreen" wrap-class="h-full" view-class="h-full">
      <slot></slot>
    </el-scrollbar>
    <slot v-else></slot>
    <template #footer>
      <div class="flex h-12 flex-row-reverse footer">
        <el-space class="base-space" wrap v-if="!slots.footer">
          <el-button :loading="props.loading" @click="confirm" type="primary">{{ props.confirmText }}
          </el-button>
          <el-button :loading="props.loading" @click="close">{{ props.closeText }}</el-button>
        </el-space>
        <slot v-else name="footer"></slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {useSlots} from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  icon: {
    type: String
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  closeText: {
    type: String,
    default: '关闭'
  },
  loading: {
    type: Boolean,
    default: false
  },
  fullscreen: {
    type: Boolean,
    default: false
  },
  isShowTitle: {
    type: Boolean,
    default: true
  }

})
const slots = useSlots()
const emit = defineEmits(['confirm', 'close'])
const confirm = () => {
  emit('confirm')
}
const close = () => {
  emit('close')
}
</script>

<style lang="scss">
.base-dialog {
  display: flex;
  flex-direction: column;

  .el-dialog__header {
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;

    .header {
      border-bottom: 1px solid var(--el-border-color);
      color: var(--el-text-color-primary);

      svg {
        color: var(--el-color-primary) !important;
      }
    }

  }

  .el-dialog__body {
    height: 0px;
    flex: 1;
  }

  .el-dialog__footer {
    padding: 0px;

    .footer {
      border-top: 1px solid var(--el-border-color);
    }
  }
}

.dark {
  .base-dialog {
    .header {
      svg {
        color: var(--el-text-color-primary) !important;
      }
    }
  }
}
</style>